<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="http:// xxx.com/register" id="registerForm" method="post"><br>
        请输入用户名：<input type="text" name="userName" /><br>
        请输入密码：<input type="text" name="password" /><br>
        请输入手机号码：<input type="text" name="phoneNumber" /><br>
        <button type="submit">提交</button>
    </form>
</body>
<script src="validator.js"></script>
<script>
    let registerForm = document.getElementById('registerForm');
    let validataFunc = () => {
        let validator = new Validator();
        validator.add(registerForm.userName, [{
            strategy: 'isNonEmpty',
            errorMsg: '用户名不能为空'
        }]);
        validator.add(registerForm.password, [{
            strategy: 'isNonEmpty',
            errorMsg: '密码不能为空'
        },{
            strategy: 'minLength:6',
            errorMsg: '密码长度不能小于6 位'
        }]);
        let errorMsg = validator.start();
        return errorMsg;
    }

    registerForm.onsubmit = () => {
        let errorMsg = validataFunc();
        if (errorMsg) {
            alert(errorMsg);
            return false;
        }
    };
</script>

</html>